<template>
  <div class="login-view">
    <div class="login-mask">
      <a-form
        ref="formRef"
        :model="state.form"
        :label-col-props="{ span: 0 }"
        :wrapper-col-props="{ span: 24 }"
      >
        <div class="title">评分系统</div>
        <a-form-item
          field="account"
          :rules="[{ required: true, message: '请输入用户名' }]"
          ><a-input
            v-model="state.form.account"
            placeholder="请输入用户名"
            allow-clear
          >
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          field="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password
            v-model="state.form.password"
            placeholder="请输入密码"
            allow-clear
          >
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item
          v-if="!state.isSecurity"
          field="captcha"
          :rules="[{ required: true, message: '请输入验证码' }]"
        >
          <a-input
            v-model="state.form.captcha"
            placeholder="请输入验证码"
            allow-clear
          >
            <template #append>
              <img :src="`data:image/jpg;base64,${state.captcha64}`" alt="" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" long @click="handleLogin">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useGetCaptchaApi, useLoginApi } from "@/api";
import { Message } from "@arco-design/web-vue";
import { onMounted, reactive, ref } from "vue";

import { useRouter, useRoute } from "vue-router";
import { userStorer } from "@/stores/user";
import LocalCache from "@/utils/storage";
const userStore = userStorer();
const router = useRouter();
const route = useRoute();

const formRef = ref();

// 表格Form
const useForm = () => {
  return {
    account: "",
    password: "",
    captcha: "",
  };
};
const state = reactive({
  form: useForm(),
  captchaKey: "",
  isSecurity: false,
  captcha64: "",
});

const handleLogin = async () => {
  const val = await formRef.value.validate();
  if (val) return;
  try {
    let {
      data: { token, tokenExpAt },
    } = await useLoginApi(Object.assign(state.form, { key: state.captchaKey }));
    userStore.userInfo.token = token;
    userStore.userInfo.tokenExpAt = tokenExpAt;
    LocalCache.set("token", JSON.parse(JSON.stringify(token)));
    Message.success("登录成功");
    if (route.query.redirect) {
      router.push(route.query.redirect as string);
      return;
    }
    router.push({
      name: "Record",
    });
  } catch (err) {
    getCaptcha();
  }
};

const getCaptcha = () => {
  useGetCaptchaApi().then(({ data: { bs64, key, security } }) => {
    state.captcha64 = bs64;
    state.captchaKey = key;
    state.isSecurity = security;
  });
};

onMounted(() => {
  getCaptcha();
});
</script>
<style scoped lang="less">
.login-view {
  background: url("@/assets/images/logo/bg.png") 50% / cover no-repeat;
  position: relative;
  height: 100vh;

  .login-mask {
    width: 400px;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100px;
      height: 100%;
    }
    .arco-form {
      padding: 40px;
    }

    .title {
      font-size: 26px;
      font-weight: 600;
      text-align: center;
      color: @primary-6;
      margin-bottom: 10px;
    }
  }
}
</style>
